<template>
	<view class="headerSearch">
		<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入订单号或者商品名称" clearButton="auto" cancelButton="none"
			@confirm="search" />
	</view>
	<view class="content">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#ff0000"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<allOrder></allOrder>
			</view>
			<view v-show="current === 1">
				<classOrder></classOrder>
			</view>
			<view v-show="current === 2">
				<mallOrder></mallOrder>
			</view>
			<view v-show="current === 3">
				<integralOrder></integralOrder>
			</view>
			<view v-show="current === 4">
				<refundOrder></refundOrder>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import allOrder from '../component/allOrder.vue'
	import classOrder from '../component/classOrder.vue'
	import mallOrder from '../component/mallOrder.vue'
	import integralOrder from '../component/integralOrder.vue'
	import refundOrder from '../component/refundOrder.vue'

	export default {
		components: {
			allOrder,
			classOrder,
			mallOrder,
			integralOrder,
			refundOrder
		},
		setup() {
			let data = reactive({
				current: 0,
				items: ['全部', '课程购买', '商城订单', '积分订单', '退款订单']
			})
			return {
				...toRefs(data)
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style lang="scss">
	.uni-mt-10 {
		margin-top: 10px;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}
</style>
